<template>
	<view class="flex1 flex_c" style="position: relative;;height: 100%;width: 100%;">
		<scroll-view class="flex1 custom-page" scroll-y @scrolltolower="scrolltolower" refresher-enabled
			:refresher-triggered="refresherTriggered" @refresherrefresh="refresherrefresh">
			<!-- @tap="goDetail(item)" -->
			<view class="uni-flex uni-row">
				<view class="flex-item" v-for="(item,index) in list">
					<image @tap="goDetail(item)" mode="aspectFill" style="width:100%; border-radius: 30rpx;" clss="img" :src="item.imageList[0]"></image>
					<text @tap="goDetail(item)" style="color:#fff;" class="text_26 bold_  ">
						{{item.message}}
					</text>
					<view class="flex_r fa_c avatar" style="height:100rpx; position:absolute; bottom:10rpx; text-align: center; " @tap="goUser(item.userid)">
							<image class="img" style="width:50rpx; height:50rpx; border-radius: 50%; margin-left:20rpx;" :src="item.pic" mode="aspectFill"></image>
						<view class="c-fff" style="margin-left:20rpx;">
							{{item.nick}}
						</view>
					</view>
				</view>
			</view>
			
			

		</scroll-view>
	</view>
</template>

<script>
	import {to} from '@/utils/index.js';
	export default {
		data() {
			return {
				pageno: 1,
				list: [],
				refresherTriggered: false
			}
		},
		created() {
			this.getList()
		},
		onShow() {
			this.refresherrefresh()
		},
		methods: {
			to,
			scrolltolower() {
				this.getList()
			},
			goUser(userId){
				uni.navigateTo({
					url: `/pages/m-pages/m-user-info/index?userid=`+userId
				})
			},
			refresherrefresh() {
				this.refresherTriggered = true
				this.pageno = 1;
				this.userList = [];
				this.getList()
			},
			goDetail(item){
				uni.setStorageSync("world-item",item)
				this.to("/pages/m-pages/m-world-detail/index")
			},
			async getList(){
				// {pageno:1,gender:1}
				let res = await this.$c.post('/app/dynamic/list?pageno='+this.pageno)
				// if(res.code == 1002){
				// 	uni.navigateTo({
				// 	  url: '/im/login/login'
				// 	});
				// }
				this.list = this.list.concat(res.data)
				console.log(this.list)
				this.pageno++;
				this.refresherTriggered = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.uni-flex{
		width:100vw;
		padding:10rpx;
		gap: 20px;
		display:flex;
		flex-wrap: wrap;
		flex-direction: row;
	}
	.flex-item {
		width: 45%;
		height: auto;
		text-align: center;
		border-radius: 30rpx;
		overflow: hidden;
		background-color: #000;
		position: relative;
		padding-bottom:100rpx;
	}
	.custom-page-title {
		box-sizing: border-box;
		position: absolute;
		padding: 0 20rpx;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		width: 100%;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.05);
		// background-color: #e3ecfb;
	}
	.swiper{
		// width:auto;
		height:500rpx;
	}
	.active-swiper{
		height:600rpx;
	}

	.custom-page {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 0;
		.item {
			box-sizing: border-box;
			padding: 20rpx;
			width: calc(100% - 40rpx);
			margin: 20rpx auto;
			border-radius: 20rpx;
			background-color: rgba(246, 246, 246, 0.1);

			.avatar {
				width: 100%;
				height: 80rpx;

				.avatar-img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 30rpx;
					background-color: #999;
					image{
						width: 80rpx;
						height: 80rpx;
					}
				}
			}

			.item-title {
				width: 100%;
				margin: 10rpx auto;
			}

			.row {
				width: 100%;
				align-items: flex-end;

				.row-text {
					view {
						min-height: 44rpx;
					}
				}

				.row-img {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
					overflow: hidden;
					background-color: #999;
					image{
						width: 150rpx;
						height: 150rpx;
					}
				}
			}


		}
	}
</style>